<template>
    <div class="component-register">
        <!-- <header class="header">
            <div class="left-view">
                <img class="icon" src="../../../assets/previous.png">
                <span>首页</span>
            </div>
            <div class="right-view">
                <span>登陆</span>
            </div>
        </header> -->
        <div class="register-form">
            <div class="register-img">
                <img src="../../../assets/logo.svg">
            </div>
            <div class="form-input">
                <van-field
                    v-model="phone"
                    type="number"
                    required
                    clearable
                    placeholder="手机号"
                >
                    <div slot="button" class="code">获取验证码</div>
                </van-field>
                <van-field
                    v-model="sms"
                    type="number"
                    required
                    clearable
                    placeholder="请输入验证码"
                />
            </div>
            <div class="form-submit">
                <span class="button__text">注册</span>
            </div>
            <div class="form-link">
                <div>注册表示已同意<span>《大金所使用协议》</span></div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    @import '../../../style/variable';
    .component-register{
        .header {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 1.5rem;
            height: 4.4rem;
            background: #EFEFF4;
            .left-view, .right-view{
                color: #36414B;
                font-size: 1.5rem;
                line-height: 1.5rem;
            }
            .left-view {
                display: flex;
                .icon{
                    width: 0.8rem;
                    height: 1.5rem;
                    margin-right: 0.6rem;
                }
            }
        }
        .register-form {
            .register-img {
                width: 8.8rem;
                height: 8.8rem;
                background: @color-white;
                border: 1px solid rgba(0, 0, 0, 0.1);
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
                border-radius: 50%;
                padding: 1.5rem 1.6rem 2rem;
                margin: 3.3rem auto 4.4rem;
            }
            .form-input {
                padding: 0 1.5rem;
                .code {
                    color: #7a7a7a;
                }
            }
            .form-submit {
                margin-top: 3.6rem;
                padding: 0 1.5rem;
                background-color: @color-white;
                .button__text {
                    padding: 1.2rem 0;
                    display: block;
                    background-color: #CE9940;
                    text-align: center;
                    font-size: 1.6rem;
                    color: @color-white;
                    border-radius: 0.3rem;
                }
            }
            .form-link {
                text-align: center;
                padding: 0 1.5rem;
                color: #7A7A7A;
                font-size: 1.2rem;
                line-height: 1.7rem;
                margin-top: 1.8rem;
                span {
                    color: #007AFF;
                }
            }
        }
    }
</style>

<style lang="less">
    @import '../../../style/variable';
    .component-register{
        .register-form {
            .van-field {
                font-size: 1.5rem;
                padding: 1.4rem 0;
                border-bottom: 1px solid #eee;
            }
            .van-field__button {
                line-height: 2.1rem;
            }
        }
    }
</style>

<script>
    import { Field } from 'vant';
    export default {
        components: {
            [Field.name]: Field,
        },
        data(){
            
            return {
                
            }
        },
        created(){
            this.$store.commit('hideNav', true);
        }
    }
</script>